<template>
  <div class="table-content">
    <el-table
      :data="paymentList"
      style="width: 100%"
      class="card-table"
      :border="false"
      stripe
      :default-sort="{prop: 'five'}"
    >
      <el-table-column
        show-overflow-tooltip
        type="index"
        label="序号"
        min-width="50%"
        align="center"
      />

      <el-table-column
        show-overflow-tooltip
        label="费用项目"
        prop="itemName"
        width="120"
        max-width="120"
        align="center"
      />

      <el-table-column
        show-overflow-tooltip
        label="房产"
        min-width="200"
        align="center"
      >
        <template slot-scope="scope">
          <span class="linkBtn cur-pitr" @click="addrClick(scope.row.houseId)">
            {{ scope.row.address }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="费用金额"
        prop="feeCny"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.feeDollar">$ {{ scope.row.feeDollar }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="产生日期"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.beginDate ? formatDotBill(scope.row.beginDate) : `--` }}</span>
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="截止日期"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.endDate ? formatDotBill(scope.row.endDate) : `--` }}</span>
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="缴费日期"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.payDate ? formatDotBill(scope.row.payDate) : `--` }}</span>
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="发出时间"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.issueDate ? formatDotBill(scope.row.issueDate) : `未发出` }}</span>
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="状态"
        width="100"
        max-width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="+scope.row.status === 0">待支付</span>
          <span v-else-if="+scope.row.status === 1">已支付</span>
          <span v-else-if="+scope.row.status === 2">待莱福管家确认是否支付</span>
          <span v-else-if="+scope.row.status === 3">已终止</span>
          <span v-else>--</span>
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="类别"
        width="100"
        max-width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.type === 0">代缴</span>
          <span v-else-if="scope.row.type === 1">自付</span>
          <span v-else>--</span>
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="上传凭证"
        width="100"
        max-width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.filePath">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="操作"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleDetail(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { formatDotBill, formatMonth } from '@/utils/common'

export default {
  props: {
    paymentList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formatDotBill,
      formatMonth
    }
  },
  methods: {
    handleDetail(id) {
      this.$emit('handleDetail', id)
    },
    addrClick(id) {
      if (!id) {
        return false
      }
      this.$router.push({ path: `/house/pageDetail?id=${id}` })
    }
  }
}
</script>

<style lang="scss" scoped>
.houseNum{
  font-size: 13px;
  color: #5AC6B7;
}

::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}

::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}

::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}

::v-deep .el-table th {
  background: #f7f7f7;
}

.cur-pitr {
  cursor: pointer;
}
</style>
